<template>
	<div class="businessxbox">
		<ul class="applyxinxi-list">
			<li>
				<h4>公司名称*</h4>
				<input type="text" placeholder="请填写公司名称" v-model="gongsimingcheng"/>
			</li>
			<li>
				<h4>公司所在地*</h4>
				<div @click="showPicker(0)" v-text="addressv?addressv:'请选择公司所在地'" class="addressts" :class="addressv?'':'addresstsN'"></div>
			    <my-addressx :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker()" :init="addressv"></my-addressx>
			</li>
			<li>
				<h4>公司地址*</h4>
				<input type="text" placeholder="请填写公司详细地址" v-model="address"/>
			</li>
			<li>
				<h4>公司类型*</h4>
				<input type="text" placeholder="请填写公司类型" v-model="qiyeleixing"/>
			</li>
			<li>
				<h4>公司总人数*</h4>
				<input type="number" placeholder="请填写公司总人数" v-model="gongsizongrenshu"/>
			</li>
			<li>
				<h4>营业执照号*</h4>
				<input type="text" name="" id="" value="" placeholder="请填写营业执照号" v-model="yingyezhizhaohao"/>
			</li>
			<li>
				<h4>营业执照所在地*</h4>
				<div @click="showPicker(1)" v-text="addressv1?addressv1:'请选择营业执照所在地'" class="addressts" :class="addressv1?'':'addresstsN'"></div>
			    <my-addressx :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker()" :init="addressv1"></my-addressx>
			</li>
			<li>
				<h4>营业执照有效期*</h4>
				<span class="stratime"><input type="date" name="" id="" value="" v-model="yingyezhizhaoyouxiaoqikaishi"/></span><span class="timezhi">—</span>
				<span class="endtime"><input type="date" name="" id="" value="" v-model="yingyezhizhaoyouxiaoqijieshu"/></span>
			</li>
			<li>
				<h4>法定经营范围*</h4>
				<input type="text" placeholder="请填写公司经营范围" v-model="fadingjingyingfanwei"/>
			</li>
			<li>
				<h4>营业执照照片*<span>照片小于1M且有公章</span></h4>
				<div class="imgbox">
					<span  v-if="sendimg"><img src="../../img-order/photo@3x.png"/><input type="file" name="" id="" value="" accept="image/*" @change="imagetian()"/></span>
					<span v-for="(item,index) in imglist">
						<img :src="item"/>
						<span @click="deleimg(index)"><img src="../../img-order/icon_close@3x.png"/></span>
					</span>
				</div>
			</li>
			<li>
				<h4>银行开户名*</h4>
				<input type="text" name="" id="" value="" placeholder="请输入银行开户名" v-model="jiesuanyinhangkaihuming"/>
			</li>
			<li>
				<h4>公司银行账号*</h4>
				<input type="number" placeholder="请选择公司银行账号" v-model="jiesuanyinhangzhanghao"/>
			</li>
			<li>
				<h4>开户行所在地*</h4>
				<input type="text" placeholder="请输入开户行所在地" v-model="jiesuankaihuyinhangsuozaidi"/>
			</li>
		</ul>
		<div class="apply-sendbtn1" @click="busxsend()">提交</div>
		<div class="canvas-box">
			<canvas id="canvas"></canvas>
		</div>
	</div>
</template>

<script>
	import MyAddressx from '@/components/address-picker/Addressx.vue'
	
	export default{
		name:'businessx',
		components: {
	      MyAddressx
	    },
		data(){
			return{
				user:0,
				showAddressPicker: false,
		        addressv: '',
		        addressv1:'',
		        addressStatus:0,
		        sendimg:true,
		        imglist:[],
		        gongsimingcheng:'',
				address:'',
				qiyeleixing:'',
				gongsizongrenshu:'',
				yingyezhizhaohao:'',
				yingyezhizhaoyouxiaoqikaishi:'',
				yingyezhizhaoyouxiaoqijieshu:'',
				fadingjingyingfanwei:'',
				yingyezhizhaoimage:[],
				jiesuanyinhangkaihuming:'',
				jiesuanyinhangzhanghao:'',
				jiesuankaihuyinhangsuozaidi:''
			}
		},
		created:function(){
			this.user=localStorage.getItem("nt_user");
		},
		mounted:function(){
			this.jcxinxi(this.user);
		},
		methods:{
			hidePicker() {
		        // 接受子组件关闭popup事件
		        this.showAddressPicker = false
		      },
		      showPicker(val) {
		      	this.addressStatus=val;
		        this.showAddressPicker = !this.showAddressPicker
		      },
		      saveAddress(val) {
		        // 从子组件接受返回所选值 val
		        if(this.addressStatus==0){
		        	this.addressv = val
		        }
		        if(this.addressStatus==1){
		        	this.addressv1 = val
		        }
		        this.showAddressPicker = !this.showAddressPicker
		      },
		      busxsend(){
		      	var self=this;
				if(self.gongsimingcheng&&self.addressv&&self.address&&self.qiyeleixing&&self.gongsizongrenshu&&self.yingyezhizhaohao&&self.addressv1&&self.yingyezhizhaoyouxiaoqikaishi&&self.yingyezhizhaoyouxiaoqijieshu&&self.fadingjingyingfanwei&&self.imglist.length>0&&self.jiesuanyinhangkaihuming&&self.jiesuanyinhangzhanghao&&self.jiesuankaihuyinhangsuozaidi){
			      	$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_apply&act=index_post",
						data:{
							"token":self.user,
							"step":'3',
							"gongsimingcheng":self.gongsimingcheng,
							"region_name":self.addressv.split("-"),
							"address":self.address,
							"qiyeleixing":self.qiyeleixing,
							"gongsizongrenshu":self.gongsizongrenshu,
							"yingyezhizhaohao":self.yingyezhizhaohao,
							"yingyezhizhaosuozaidi":self.addressv1.split("-"),
							"yingyezhizhaoyouxiaoqikaishi":self.yingyezhizhaoyouxiaoqikaishi,
							"yingyezhizhaoyouxiaoqijieshu":self.yingyezhizhaoyouxiaoqijieshu,
							"fadingjingyingfanwei":self.fadingjingyingfanwei,
							"yingyezhizhaoimage":self.imglist,
							"jiesuanyinhangkaihuming":self.jiesuanyinhangkaihuming,
							"jiesuanyinhangzhanghao":self.jiesuanyinhangzhanghao,
							"jiesuankaihuyinhangsuozaidi":self.jiesuankaihuyinhangsuozaidi
						},
						dataType:'json',
						success:function(data){
							self.$router.push({path:'/business/businests'})
						}
					});
		      	}else{
		      		alert("填写完整的信息再提交")
		      	}
				
		      	
		      },
		      imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
//                  console.log("成功读取....");
                    self.imglist.push(e.target.result);
                    $('input[type=file]')[0].value="";
                    if(self.imglist.length>=2){
                    	self.sendimg=false;
                    }
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);				
			},
			deleimg:function(ind){
				this.imglist.splice(ind,1);
				console.log(this.imglist.length)
				if(this.imglist.length<2){
					this.sendimg=true;
				}
			},
			jcxinxi:function(user){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_apply&act=index",
					data:{"token":user,"step":"3"},
					dataType:'json',
					success:function(res){
						var data=res.retval;
						if(data.store_status==1||data.store_status==2){
							self.$router.push({path:'/user'});
						}
						if(data.gongsimingcheng){self.gongsimingcheng=data.gongsimingcheng}
						if(data.region_name){self.addressv=data.region_name}
						if(data.address){self.address=data.address}
						if(data.qiyeleixing){self.qiyeleixing=data.qiyeleixing}
						if(data.gongsizongrenshu){self.gongsizongrenshu=data.gongsizongrenshu}
						if(data.yingyezhizhaohao){self.yingyezhizhaohao=data.yingyezhizhaohao}
						if(data.yingyezhizhaosuozaidi){self.addressv1=data.yingyezhizhaosuozaidi}
						if(data.yingyezhizhaoyouxiaoqikaishi){self.yingyezhizhaoyouxiaoqikaishi=data.yingyezhizhaoyouxiaoqikaishi}
						if(data.yingyezhizhaoyouxiaoqijieshu){self.yingyezhizhaoyouxiaoqijieshu=data.yingyezhizhaoyouxiaoqijieshu}
						if(data.fadingjingyingfanwei){self.fadingjingyingfanwei=data.fadingjingyingfanwei}
						if(data.yingyezhizhaoimage){
							for(var i=0;i<data.yingyezhizhaoimage.length;i++){
								(function(i){
									console.log(i);
									if(i>=1){
										self.sendimg=false;
									}
									var a=i;
									var canvas=document.getElementById("canvas"),//获取canvas
									      ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
									      img = new Image(),//创建新的图片对象
									      base64 = '' ;//base64 
									  img.src = 'http://www.ntyouxuan.com/'+data.yingyezhizhaoimage[a];
	//								  img.setAttribute("crossOrigin",'Anonymous')
									  img.onload = function(){//图片加载完，再draw 和 toDataURL
									  	canvas.width=img.width;
									  	canvas.height=img.height;
									       ctx.drawImage(img,0,0);    
									       base64 = canvas.toDataURL("image/png"); 
									       self.imglist.push(base64);
									  };
								})(i)
							}
						}
						if(data.jiesuanyinhangkaihuming){self.jiesuanyinhangkaihuming=data.jiesuanyinhangkaihuming}
						if(data.jiesuanyinhangzhanghao){self.jiesuanyinhangzhanghao=data.jiesuanyinhangzhanghao}
						if(data.jiesuankaihuyinhangsuozaidi){self.jiesuankaihuyinhangsuozaidi=data.jiesuankaihuyinhangsuozaidi}
					}
				});
			}
		}
	}
</script>

<style>
	.businessxbox{font-size:0;}
	.applyxinxi-list{padding-left: 0.32rem;padding-right: 0.32rem;background-color:#fff;}
	.applyxinxi-list>li{border-bottom: 1px solid #eee;padding-top: 0.16rem;padding-bottom: 0.24rem;;}
	.applyxinxi-list>li:last-child{border:0px solid #eee;}
	.applyxinxi-list>li>h4{font-size:0.28rem;color:#fb9722;line-height: 0.58rem;}
	.applyxinxi-list>li>h4>span{font-size:0.20rem;}
	.applyxinxi-list>li>input,.addressts{height:0.64rem;width:100%;font-size:0.32rem;color:#2B2B2B;line-height: 0.64rem;}
	.addresstsN{color:#ccc;}
	.apply-sendbtn1{width:6.86rem;height:1rem;border-radius:1rem;line-height: 1rem;box-sizing: border-box;background-color:#fb9722;text-align: center;color:#fff;font-size:0.36rem;letter-spacing: 0.1rem;padding-left: 0.3rem;margin:0.6rem auto;}
	.imgbox{overflow: hidden;padding-top: 0.18rem;}
	.imgbox>span{float:left;display: inline-block;width:1.2rem;height:1.2rem;margin-right: 0.48rem;position:relative;}
	.imgbox>span>img{width:1.2rem;height:1.2rem;}
	.imgbox>span>input{position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0;}
	.imgbox>span>span{display: inline-block;position:absolute;top:-0.18rem;right:-0.18rem;width:0.36rem;height:0.36rem;border-radius:50%;background-color:#fff;}
	.imgbox>span>span>img{width:0.36rem;height:0.36rem;}
	.stratime,.stratime>input,.endtime,.endtime>input{display: inline-block;width:2.66rem;height:0.78rem;background-color:#f9f9f9;color:#2b2b2b;text-align: center;font-size:0.28rem;}
	.endtime{margin-left:0.25rem ;}
	.stratime{margin-right: 0.25rem;}
	.timezhi{line-height: 0.6rem;font-size:0.2rem;display: inline-block;box-sizing: border-box;height:0.78rem;}
	.canvas-box{height:0;overflow: hidden;}
</style>